<template>
  <div class="myHeader myLineHeight">
    <div style="width: 150px; text-align:left; font-weight: bold"
    >
      后台管理
    </div>
    <div style="flex: 1" />
    <div style="width: 350px; text-align:right; vertical-align: middle">
      <span class="el-dropdown-link">当前用户：刘群</span>
      <el-dropdown class="myLineHeight" trigger="click">
        <span class="myLineHeight" style="padding: 0; margin-left: 10px">
          <span  style="vertical-align: middle">
            <el-icon :size="18" color="green">
              <setting></setting>
            </el-icon>
          </span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item disabled>设置</el-dropdown-item>
            <el-dropdown-item disabled>换号登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script>

import { ArrowDown, Setting } from '@element-plus/icons-vue'
export default {
  name: 'Header',
  components: {
    ArrowDown, Setting,
  }
  // props: {
  //   msg: String
  // }
}
</script>

<style scoped>
.myHeader {
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  font-size: 20px;
  padding: 10px 15px 0 15px;
}
.myLineHeight {
/*  line-height: 0;*/
  vertical-align: middle;
}
</style>
